<script setup lang="ts">
import { reactive, ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])

const deleteBook = (id: number) => {
  list.value = list.value.filter(v=>v.id !== id)
  // const index = list.value.findIndex(v=>v.id===id)
  // list.value.splice(index,1)
  // list.value.splice(id,1)
}

const bookInfo = reactive({
  id:0,
  name:'',
  author:''
})

const addBook = () => {
 bookInfo.id = Date.now()
//  方法一：
//  list.value.push({
//   id:bookInfo.id,
//   name:bookInfo.name,
//   author:bookInfo.author
//  })

// 方法二：
//  list.value.push({... bookInfo})

// 合并对象（浅拷贝）：把一个或者多个源对象中的属性复制到目标对象，并返回修改后的目标对象。
// 温馨提示：鸿蒙中禁用了Object.assign（）方法
// 1.鸿蒙如何实现深/浅拷贝：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkts-94-V5
// 2.鸿蒙如何合并两个对象：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkts-61-V5
// 方法三：
 list.value.push(Object.assign({},bookInfo))
}
</script>


<template>
  <div id="app">
    <h3>黑马书架</h3>
    <div>
      <input type="text" v-model="bookInfo.name" placeholder="请输入书名"></input>
      <input type="text" v-model="bookInfo.author" placeholder="请输入作者"></input>
      <button @click="addBook">添加</button>
      <p>{{ bookInfo }}</p>
    </div>
    <ol>
      <li v-for="(item,index) in list" :key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <button @click="deleteBook(item.id)">删除</button>
      </li>
    </ol>
  </div>
</template>